<script lang="ts" setup>
import {
    Delete,
    Edit,
} from '@element-plus/icons-vue';
import { ref, reactive } from 'vue'
import DefineComponent from "../utils/App";
import { ElMessage, ElMessageBox } from 'element-plus'
import { GoodShoppingSelByIdService, GoodShoppingUpdService,GoodShoppingDelService } from "@/api/shoppingcart";
// 获取用户的id
import { useUserInfoStore } from '@/store/user.js'
import { OrderAddService } from "@/api/order";
DefineComponent();
const userInfoStore = useUserInfoStore();
//  数据模型
const Goodinfo = ref([
    {
        id: 1,
        gname: "Java讲义",
        gimage: "1.jpg",
        price: 10,
        totalPrice: 20,
        snumber: 2,
        gid:1,
        bId: 1,
        sId: 2,
        username: 'a',
    },
])
//  修改模型
const GoodModel = ref({
    id: '',
    gname: '',
    gimage: '',
    price: '',
    totalPrice: '',
    snumber: '',
    bId: '',
    sId: '',
    username: '',

})

//  查询购物车列表
const GoodList = async () => {
    console.log('用户id:' + userInfoStore.info.id)

    let result = await GoodShoppingSelByIdService(userInfoStore.info.id);

    console.log("返回结果:")
    console.log(result)

    //渲染列表数据
    Goodinfo.value = result.data

    //  修改属性名字   管理员页面需要
    //为列表中添加categoryName属性
    // for (let i = 0; i < Goodinfo.value.length; i++) {
    //     let info = Goodinfo.value[i];
    //     for (let j = 0; j < Goodinfo.value.length; j++) {
    //         if (info.status === 0) {
    //             info.statustype = '待审核'
    //         } else if (info.status === 1) {
    //             info.statustype = '已通过'
    //         } else {
    //             info.statustype = '已下架'
    //         }
    //     }
    // }
}

GoodList()

// 修改弹窗
const dialogUpdVisible = ref(false)

// 展示编辑弹窗 
const showUpdDialog = (row) => {
    dialogUpdVisible.value = true
    // 数据拷贝
    GoodModel.value.id = row.id;
    GoodModel.value.gname = row.gname;
    GoodModel.value.gimage = row.gimage;

    GoodModel.value.price = row.price;

    GoodModel.value.snumber = row.snumber;
    // GoodModel.value.updateTime = row.updateTime;
    // GoodModel.value.pId = row.pId;
}

//  修改商品数据
const UpdGood = async () => {

    console.log('购物车信息：')
    let params = {
        id: GoodModel.value.id,
        number: GoodModel.value.snumber,
        totalPrice: GoodModel.value.snumber * GoodModel.value.price
    }
    console.log(params)
    let result = await GoodShoppingUpdService(params)
    console.log('res:')
    console.log(result)

    // 成功
    if (result.code === 1) {
        ElMessage.success(result.msg ? result.msg : '修改成功')
        dialogUpdVisible.value = false
    } else {
        ElMessage.error('修改失败')
    }
    GoodList()
}
// 删除购物车商品
const DelGood=async(row)=>{
   let result =await  GoodShoppingDelService(row.id)
    // 成功
    if (result.code === 1) {
        ElMessage.success(result.msg ? result.msg : '删除成功')
        dialogUpdVisible.value = false
    } else {
        ElMessage.error('删除失败')
    }
    GoodList()
}

//  添加订单
const addorder = async (row) => {

let params = {
  gId: row.gid,
  number: 1,
  totalPrice: row.price,
  sId: row.sid        // 卖家id
}
console.log('订单数据：');
console.log(params);

let result = await OrderAddService(params)

// 成功
if (result.code === 1) {
  ElMessage.success(result.msg ? result.msg : '添加成功')

} else {
  ElMessage.error('添加失败')
}
GoodList()
}
</script>


<template>
    <el-card class="">
        购物车
        <div style="margin-top: 20px;">
            <hr>
        </div>
        <el-table :data="Goodinfo" style="width: 100%">
            <el-table-column type="expand">
                <template #default="props">
                    <div m="4">
                        <p m="t-0 b-2">订单编号: {{ props.row.id }}</p>
                        <p m="t-0 b-2">卖家: {{ props.row.username }}</p>
                        <!-- <p m="t-0 b-2">卖家编号: {{ props.row.sId }}</p> -->
                    </div>
                </template>
            </el-table-column>

            <el-table-column label="商品名称" prop="gname" />
            <el-table-column label="图像" prop="gimage">
                <template #default="{ row }">
                    <img :src=row.gimage alt="图片走丢了" style="height: 100px" />
                </template>
            </el-table-column>
            <el-table-column label="价格" prop="price" />
            <el-table-column label="总价" prop="totalPrice" />
            <el-table-column label="数量" prop="snumber" />

            <el-table-column label="操作" width="180">
                <template #default="{ row }">
                    <!-- 修改 -->
                    <el-button type="primary" :icon="Edit" circle @click="showUpdDialog(row)" />
                    <!-- 删除商品 -->
                    <el-button type="danger" :icon="Delete" circle @click="DelGood(row)" />
                    <!-- 添加到订单 -->
                    <el-button type="primary" round @click="addorder(row)">加入订单</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- // 修改商品 -->
        <el-dialog v-model="dialogUpdVisible" title="修改商品" width="30%">
            <el-form :model="GoodModel" label-width="100px" style="padding-right: 30px">
                <el-form-item label="商品编号" prop="id">
                    <el-input v-model="GoodModel.id" minlength="1" maxlength="10" disabled></el-input>
                </el-form-item>
                <el-form-item label="商品名称" prop="gname">
                    <el-input v-model="GoodModel.gname" minlength="1" maxlength="15" disabled></el-input>
                </el-form-item>
                <!-- <el-form-item label="商品图片" prop="gimage">
                    <el-input v-model="GoodModel.gimage" minlength="1" maxlength="15"></el-input>
                </el-form-item> -->

                <el-form-item label="价格" prop="price">
                    <el-input v-model="GoodModel.price" minlength="1" maxlength="15" disabled></el-input>
                </el-form-item>

                <!-- <el-form-item label="总价" prop="totalPrice">
                    <el-input v-model="GoodModel.totalPrice" minlength="1" maxlength="15" disabled></el-input>
                </el-form-item> -->
                <el-form-item label="购买数量" prop="snumber">
                    <el-input v-model="GoodModel.snumber" minlength="1" maxlength="15"></el-input>
                </el-form-item>
                <!-- <el-form-item label="修改时间" prop="updateTime">
                    <el-input v-model="GoodModel.updateTime" minlength="1" maxlength="15" disabled></el-input>
                </el-form-item> -->
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogUpdVisible = false">取消</el-button>
                    <el-button type="primary" @click="UpdGood()"> 确认 </el-button>
                </span>
            </template>
        </el-dialog>
    </el-card>

</template>


<style scoped>
.el-p {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}

.el-input {
    width: 220px;
}

.el-select {
    width: 220px;
}


.card-header {
    display: flex;
    justify-content: space-between;
}
</style>